<template>
  <div>
    <van-nav-bar :title="title" :left-arrow="false" />

    <van-cell-group title="商家信息">
      <van-cell title="商家名称" :value="form.name" />
      <!-- <van-cell title="信用代码" :value="form.code" /> -->
      <van-cell title="商家地址" :value="form.address" />
      <van-cell title="联 系 人" :value="form.person" />
      <van-cell title="联系电话" :value="form.telephone" />
      <van-cell title="合作协议" />
      <van-image
        width="100%"
        :src="form.images[0].image"
        v-if="imgVisible == true"
      ></van-image>
    </van-cell-group>
    <div style="margin: 32px">
      <van-button round block type="primary" @click="goHome">返回</van-button>
    </div>
    <!-- <van-cell title="店铺门头图片上传" size="large"> </van-cell>
    <div style="margin: 0 5px">
      <van-uploader
        accept="image/gif, image/jpeg ,image/png"
        v-model="fileList"
        multiple
        :max-count="4"
        :after-read="afterRead"
        :before-delete="delImages"
      />
    </div> -->
    <!-- <div style="margin: 32px">
      <van-button round block type="primary" @click="onContact"
        >签订合作协议</van-button
      >
    </div> -->
  </div>
</template>

<script>
import {
  getWxRetailerById,
  uploadRetailerImage,
  delWxRetailerImage,
} from "@/api/member";
export default {
  components: {},
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      fileList: [],
      form: {},
      imgVisible: false,

    };
  },
  computed: {},
  methods: {
    goHome() {
      this.$router.push({ name: "Card" });
    },
    getRetailerByID() {
      const openid = localStorage.getItem("openid");

      getWxRetailerById(this.retailer_id)
        .then((res) => {
          console.log(res.data);
          this.form = res.data;
          this.imgVisible = this.form.images.length > 0 && openid === this.form.openid;
        })
        .catch(() => {
          this.$notify({
            type: "danger",
            message: "读取商家数据失败",
          });
        });
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let data = new FormData();
      //file是当前file对象, 此对象包含file和content
      data.append("retailer_id", this.retailer_id);
      data.append("image", file.file);
      uploadRetailerImage(data)
        .then((res) => {
          console.log(res.data);
          this.$notify({
            type: "success",
            message: "图片上传成功",
          });
          file["id"] = res.data.file.id;
          console.log(this.fileList);
        })
        .catch((error) => {
          console.log(error);
          this.$notify({
            type: "danger",
            message: "图片上传失败",
          });
        });
    },
    delImages(file) {
      console.log(file);
      delWxRetailerImage(file.id)
        .then((res) => {
          console.log(res.data);
          this.$notify({
            type: "success",
            message: "图片删除成功",
          });
        })
        .catch(() => {
          this.$notify({
            type: "danger",
            message: "图片删除失败!",
          });
        });
      return true;
    },
  },
  created() {},
  mounted() {
    console.log(this.retailer_id);
    this.getRetailerByID();
  },
};
</script>

<style  scoped>
</style>